<template>
  <div class="industry-box">
    <cardPanel title="产业概况">
      <ul class="industry-content">
        <li
          v-for="(item, index) in industryList"
          :key="index"
          @click="onSelectIndustry(item, index)"
        >
          <div class="industry-bg">
            <img :src="item.isSelect ? item.iconActive : item.icon" />
          </div>
          <div class="industry-info">
            <p>
              <span :class="[item.isSelect ? 'select-color' : '']">{{
                item.num
              }}</span
              >{{ item.unit }}
            </p>
            <label>{{ item.label }}</label>
          </div>
        </li>
      </ul>
    </cardPanel>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// 产业概况
import cardPanel from "@/components/cardPanel/index.vue";
import industry1 from "@/assets/image/overview/industry1.png";
import industry11 from "@/assets/image/overview/industry11.png";
import industry2 from "@/assets/image/overview/industry2.png";
import industry22 from "@/assets/image/overview/industry22.png";
import industry3 from "@/assets/image/overview/industry3.png";
import industry33 from "@/assets/image/overview/industry33.png";
import industry4 from "@/assets/image/overview/industry4.png";
import industry44 from "@/assets/image/overview/industry44.png";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

const overviewData:any = {
  阳光城社区: {
    小区数量: 10,
    商铺数量: 105,
    医疗机构: 26,
    教育机构: 68,
  },
  榆康社区: {
    小区数量: 15,
    商铺数量: 174,
    医疗机构: 38,
    教育机构: 47,
  },
  桃李路社区: {
    小区数量: 20,
    商铺数量: 298,
    医疗机构: 57,
    教育机构: 89,
  },
  兴达路社区: {
    小区数量: 14,
    商铺数量: 160,
    医疗机构: 34,
    教育机构: 67,
  },
  开源路社区: {
    小区数量: 16,
    商铺数量: 186,
    医疗机构: 46,
    教育机构: 58,
  },
  圣景路社区: {
    小区数量: 18,
    商铺数量: 245,
    医疗机构: 32,
    教育机构: 65,
  },
};

const industryList = ref([
  {
    label: "小区数量",
    num: 0,
    unit: "个",
    icon: industry1,
    iconActive: industry11,
    isSelect: false,
  },
  {
    label: "商铺数量",
    num: 0,
    unit: "个",
    icon: industry2,
    iconActive: industry22,
    isSelect: false,
  },
  {
    label: "医疗机构",
    num: 0,
    unit: "个",
    icon: industry3,
    iconActive: industry33,
    isSelect: false,
  },
  {
    label: "教育机构",
    num: 0,
    unit: "个",
    icon: industry4,
    iconActive: industry44,
    isSelect: false,
  },
]);

watch(() => store.overviewType, (val:string) => {
  let allData:any = {
    小区数量: 0,
    商铺数量: 0,
    医疗机构: 0,
    教育机构: 0,
  }
  if(val === '') {
    const keys = Object.keys(overviewData);
    keys.forEach((item:any) => {
      const info = overviewData[item];
      allData['小区数量'] += info['小区数量'];
      allData['商铺数量'] += info['商铺数量'];
      allData['医疗机构'] += info['医疗机构'];
      allData['教育机构'] += info['教育机构'];
    })
  } else {
    allData = overviewData[val];
  }

  industryList.value.forEach((item:any) => {
    item.num = allData[item.label];
  })

}, {
  immediate: true
})

const onSelectIndustry = (data: any, index: number) => {
  const temp = Object.assign({}, data, { isSelect: !data.isSelect });
  industryList.value.splice(index, 1, temp);
};
</script>

<style lang="scss" scoped>
.industry-box {
  width: 360px;
  height: 36%;
  margin-bottom: 10px;
}
.industry-content {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  li {
    position: relative;
    width: 48%;
    height: 90px;
    cursor: pointer;
  }
}
.industry-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.industry-info {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  span {
    font-family: Alibaba PuHuiTi, serif;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #47e8fe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 5px;
  }
  .select-color {
    color: #ff9407;
  }
}
</style>
